<template>
	<!-- 点位 -->
	<view class="point-container list-bg">
		<view v-if="isShow">
			<!-- 头部 -->
			<view class="menu-box dis-between">
				<view class="menu-image">
					<image @click="leftShow = true" class="image" src="../../static/images/ui/menu.png"
						mode="heightFix"></image>
					<text class="white-text bold">{{legal_name + '/' + currency_name}}</text>
				</view>
				<image @click="detailClick" class="image" src="../../static/images/ui/hangqing.png" mode="heightFix">
				</image>
			</view>
			<!-- Spot price -->
			<view class="spot-price">
				<text>{{i18n.point.spot}}</text>
				<text class="fall">{{last_price | xiaoshudian}}</text>
				<text>≈￥{{last_price * Number(ExRAte) | xiaoshudian}}</text>
			</view>
			<!-- tabs -->
			<tabs class="tab-container" :list="tabsList" @click="tabsClick"></tabs>
			<view class="data-title" v-show="transactionIndex != 'profit'">
				<text>{{i18n.period.time}}</text>
				<text>{{i18n.period.direction}}</text>
				<text>{{i18n.period.profitPrice}}</text>
				<text>{{i18n.period.exitPrice}}</text>
				<text>{{i18n.period.wave}}</text>
				<text v-if="transactionIndex == 'intrade'">{{i18n.point.opera}}</text>
			</view>
			<view class="data-list dis-between" v-for="(item, index) in dataList" :key="index"
				v-show="transactionIndex != 'profit'">
				<text>{{item.create_time | formateCreateTime}}</text>
				<text :class="item.type === 2?'fall': 'rise'">{{item.type | direction(i18n.period)}}</text>
				<text>{{item.now_price | xiaoshudian}}</text>
				<text>{{transactionIndex !== 'intrade'?item.update_price :item.last_price | xiaoshudian}}</text>
				<text>{{ item.profits | xiaoshudian}}</text>
				<view class="data-list-btn" v-if="transactionIndex == 'intrade'" @click="actionClick(item.id)">
					<text>{{i18n.point.position}}</text>
				</view>
			</view>
			<view class="dis-between resources" v-show="transactionIndex === 'profit'">
				<view>
					<text class="white-text">{{Number(user_price)}}</text>
					<text>{{i18n.point.usable}}</text>
				</view>
				<view>
					<text class="white-text">{{Number(userlock_price)}}</text>
					<text>{{i18n.point.occupy}}</text>
				</view>
				<view>
					<text class="white-text">{{Number(userprofit_price)}}</text>
					<text>{{i18n.point.freeze}}</text>
				</view>
			</view>
			<view class="empty view-bg" v-show="transactionIndex === 'profit'"></view>
			<!-- 中间内容 -->
			<view class="center-container dis-between list-bg" v-show="transactionIndex === 'profit'">
				<view class="left-view">
					<view class="left-view-btn dis-between">
						<view
							:class="item.active && index === 0? 'rise-btn': item.active && index === 1? 'fall-btn': ''"
							class="btn radius-box" v-for="(item,index) in leftViewBtn" :key="index"
							@click="leftViewBtnClick(index)">
							<text class="bold">{{item.title}}</text>
						</view>
					</view>
					<!-- Principal（USDT） -->
					<view class="principal">
						<text class="white-text">{{i18n.point.principal}}（USDT）</text>
						<view class="radius-box">
							<input @blur="principalBlur" v-model="info.origin_price" type="number"
								:placeholder="i18n.point.enter">
						</view>
					</view>
					<!-- tabs -->
					<view class="left-view-tabs dis-between">
						<view :class="leftViewIndex === index? 'main-bg': ''" class="radius-box"
							v-for="(item, index) in ratio" :key="index" @click="leftViewClick(index, item)">
							<text>{{item.value + '%'}}</text>
						</view>
					</view>
					<!-- lever -->
					<view class="lever dis-between">
						<text>{{i18n.point.lever}}</text>
						<dropdown-box @click="leverClick" :Top="90" width="315rpx" height="88rpx" :radius="6"
							:regionList="muit"></dropdown-box>
					</view>
					<!-- money -->
					<view class="dis-between price">
						<text>{{i18n.point.amount}}</text>
						<text class="white-text">{{amount}}</text>
					</view>
					<view class="dis-between price">
						<text>{{i18n.point.service}}</text>
						<text class="white-text">{{servicePrice | xiaoshudian}}</text>
					</view>
					<view class="dis-between price">
						<text>{{i18n.point.orderAmount}}</text>
						<text
							class="white-text">{{Number(info.origin_price) + Number(servicePrice) | xiaoshudian}}</text>
					</view>
					<!-- 按钮 -->
					<view :class="leftViewBtnValue === i18n.point.sell?'fall-btn': ''"
						class="radius-box bold left-view-btn-open" @click="leftViewBtnBottomClick">
						<text class="white-text">{{leftViewBtnValue}}</text>
					</view>
				</view>
				<view class="right-view">
					<!-- Price(USDT） -->
					<view class="price">
						<view class="price-list dis-between">
							<text>{{i18n.point.price}}(USDT）</text>
							<text>{{i18n.point.amountText}}</text>
						</view>
						<view class="price-list dis-between" v-for="item in decline" :key="item.id">
							<text class="fall">{{item.now_price | xiaoshudian}}</text>
							<text class="white-text">{{item.dw_num | xiaoshudian}}</text>
						</view>
					</view>
					<!-- center-data -->
					<view class="center-data">
						<text class="fall bold">{{last_price | xiaoshudian}}</text>
						<text>≈￥{{last_price * Number(ExRAte) | xiaoshudian}}</text>
					</view>
					<!-- rise-data -->
					<view class="fise-data">
						<view class="fise-data-list dis-between" v-for="item in up" :key="item.id">
							<text class="rise">{{item.now_price | xiaoshudian}}</text>
							<text class="white-text">{{item.dw_num | xiaoshudian}}</text>
						</view>
					</view>
					<!-- point-box -->
					<view class="dis-between point-box">
						<dropdown-box :company="i18n.point.depth " :isAfter="false" :size="22" :Top="52" width="176rpx"
							height="50rpx" :radius="6" :regionList="depthList" @click="depthClick" />
						<dropdown-box :Top="52" dropdownWidth="220rpx" positionLabel="right" width="50rpx"
							height="50rpx" :radius="6" :regionList="pointList" @click="pointListClick">
							<view class="point-container">
								<image class="image" src="../../static/images/icon/point.png" mode="widthFix"></image>
							</view>
						</dropdown-box>
					</view>
				</view>
			</view>
			<view class="empty view-bg" v-show="transactionIndex === 'profit'"></view>
			<!-- Member Area -->
			<view class="member-area" v-show="transactionIndex === 'profit'">
				<view class="title bold">
					<text class="white-text">{{i18n.point.memberArea}}</text>
				</view>
				<view class="member-area-tabs dis-between">
					<text>{{i18n.point.time}}</text>
					<text>{{i18n.point.direction}}</text>
					<text>{{i18n.point.price}}</text>
				</view>
				<view class="member-area-content dis-between white-text" v-for="item in leverdw" :key="item.id">
					<text>{{item.create_time | formateCreateTime}}</text>
					<text :class="item.type === 1?'fall': 'rise'">{{item.type_name}}</text>
					<text>{{item.update_price | xiaoshudian}}</text>
				</view>
			</view>
		</view>
		<!-- 关闭以后显示 -->
		<view class="point-empty" v-else>
			<text>{{!is_open_lever? is_open_leverremarks: is_open_grealzq? i18n.common.seniorAuth: i18n.common.primaryAuth}}</text>
		</view>
		<!-- 左边侧边栏 -->
		<u-popup v-model="leftShow" width="620">
			<view class="left-container container list-bg">
				<view class="left-top dis-between">
					<text class="white-text">{{i18n.point.periodTreaty}}</text>
					<image @click="leftShow = false" class="image" src="../../static/images/ui/menu.png"
						mode="heightFix"></image>
				</view>
				<view v-for="(item, index) in currencyShowList" :key="index" v-if="item.name === 'USDT'">
					<view class="dis-between left-list" v-for="(j, k) in item.quotation" :key="k"
						@click="leftShowViewBtn(item, j, true)">
						<view>
							<text class="white-text bold">{{item.name}}</text>
							<text>{{'/' + j.currency_name}}</text>
						</view>
						<text class="rise bold">{{j.now_price}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 开多、开空弹窗 -->
		<u-popup v-model="leftBtnShow" mode="bottom">
			<view class="left-btn-view  list-bg">
				<view class="white-text dis-between title">
					<text>{{i18n.point.agency}}</text>
				</view>
				<view class="left-btn-list dis-between" v-for="(item, index) in leftBtnBottom" :key="index">
					<text>{{item.title}}</text>
					<text class="white-text">{{index===1?last_price + ' USDT' :item.value}}</text>
				</view>
				<view class="container">
					<custom-submit @click="leftBtnClick" :loading="loading" :marginTop="30"
						:title="i18n.common.confirm"></custom-submit>
					<custom-submit @click="leftBtnShow = false" :marginTop="30" bgColor="rgba(255, 255, 255, .4)"
						:title="i18n.common.cancel"></custom-submit>
				</view>
			</view>
		</u-popup>
		<!-- 验证登录 -->
		<tips-popup ref="tips"></tips-popup>
		<!-- loading -->
		<custom-loading text="" mask="true" click="true" ref="loading"></custom-loading>
		<!-- 平仓确认按钮 -->
		<tips-popup ref="actionShow" @click="actionPopupClick"></tips-popup>
	</view>
</template>

<script>
	import Tabs from '@/components/Tabs/index.vue'
	import DropdownBox from '@/components/DropdownBox/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import CustomLoading from '@/components/Loadidng/index.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		leverSubmit,
		leverPoints,
		leverBatchdw_close,
		leverClose
	} from '@/api/index.js'
	import {
		Toast,
		formateTime
	} from '@/utils/util.js'
	export default {
		components: {
			Tabs,
			DropdownBox,
			CustomSubmit,
			TipsPopup,
			CustomLoading
		},
		filters: {
			formateCreateTime(val) {
				return formateTime(val, true);
			},
			direction(val, language) {
				let name = '';
				switch (val) {
					case 1:
						name = language.buy
						break;
					case 2:
						name = language.sell
						break;
				}
				return name;
			},
			xiaoshudian(val) {
				return (Math.round((Number(val) * 100)) / 100).toFixed(2)
			},
			is_profit(val, language) {
				if (Number(val) > 0) return language.profitText;
				return language.loss;
			},
			is_class(val) {
				if (Number(val) > 0) return 'rise';
				return 'fall';
			}
		},
		data() {
			return {
				leftShow: false,
				info: {
					legal_id: 1,
					currency_id: 3,
					type: 1,
					origin_price: 0
				},
				leftViewIndex: null,
				depthList: [{
						value: 1
					},
					{
						value: 2
					},
					{
						value: 3
					},
					{
						value: 4
					},
					{
						value: 5
					},
				],
				leftViewBtn: [{
						title: ''
					},
					{
						title: ''
					}
				],
				leftIndex: 0,
				leftViewBtnValue: '',
				leftBtnShow: false,
				// actionShow: false,
				loading: false,
				actionLoading: false,
				leftBtnBottom: [],
				muit: [],
				ratio: [],
				legal_name: 'BTC',
				currency_name: 'USDT',
				amount: 0,
				last_price: 0,
				ExRAte: 0,
				ustd_price: 0,
				lever_trade_fee: 0, //服务费
				user_lever: 0, //使用金额
				decline: [{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
				],
				up: [{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
					{
						number: '37.0808',
						highest: '0.75000'
					},
				],
				leverdw: [],
				isRequest: true,
				legalObj: {},
				currencyObj: {},
				time: null,
				typename: 0,
				depth: 1,
				user_price: null,
				userlock_price: null,
				userprofit_price: null,

				transactionIndex: 'profit',
				dataListObj: {},
				dataList: [],
				actionId: null
			}
		},
		computed: {
			...mapGetters(['token', 'currencyShowList', 'is_open_leverremarks', 'is_open_lever', 'is_open_realzq',
				'is_open_grealzq', 'review_status'
			]),
			i18n() {
				return this.$t('message');
			},
			tabsList() {
				return [{
					title: this.$t('message').point.business,
					value: 'profit'
				}, {
					title: this.$t('message').point.positions,
					value: 'intrade'
				}, {
					title: this.$t('message').point.deal,
					value: 'deal'
				}]
				// return [this.$t('message').point.business, this.$t('message').point.positions, this.$t('message').point.deal]
			},
			servicePrice() {
				let price = 0;
				if (!this.info.origin_price || !this.lever_trade_fee) return price;
				price = this.info.origin_price * (this.lever_trade_fee / 100);
				return price;
			},
			pointList() {
				return [{
						title: this.$t('message').point.sellOrder,
						value: 1,
					},
					{
						title: this.$t('message').point.buyOrder,
						value: 2,
					},
					{
						title: this.$t('message').point.defaultText,
						value: 0,
					}
				]
			},
			isShow() {
				if (!this.is_open_lever || (this.is_open_realzq && this.review_status === 0) || (this.is_open_grealzq &&
						this.review_status !== 4)) return false;
				return true;
			}
		},
		onReady() {
			if (!this.isShow) return;
			this.$refs.loading.open();
		},
		onLoad() {
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.i18n.tabBar.point
			});
		},
		async activated() {
			if (!this.isShow) return;
			if (!this.token) return this.$refs.tips.open('confirm', this.i18n.common.loginTips);
			// this.this.leftViewBtn[0]['title'] = this.i18n.point.buy;
			// this.this.leftViewBtn[0]['title'] = this.i18n.point.buy;
			this.$set(this.leftViewBtn[0], 'title', this.i18n.point.buy);
			this.$set(this.leftViewBtn[1], 'title', this.i18n.point.sell);
			this.isRequest = true;
			await this.customDefault();
			this.getDetail();
		},
		deactivated() {
			this.isRequest = false;
			clearInterval(this.time)
			this.time = null;
		},
		async mounted() {
			if (!this.isShow) return;
			if (!this.token) {
				this.$refs.tips.open('confirm', this.i18n.common.loginTips);
				this.$refs.loading.close();
				return;
			};
			this.leftViewBtn = [{
				title: this.i18n.point.buy,
				active: true
			}, {
				title: this.i18n.point.sell,
				active: false
			}]
			clearInterval(this.time)
			this.time = null;
			this.leftViewBtnValue = this.i18n.point.buy;

			if (this.currencyShowList.length) {
				await this.customDefault();
				this.isRequest = true;
				this.getDetail();
				return;
			}

			this.$store.dispatch('currency/getCurrencyList').then(() => {
				this.customDefault();
				this.isRequest = true;
				this.getDetail();
			})

		},
		methods: {
			// 底部导航栏切换
			tabsClick(val) {
				this.transactionIndex = val;
				this.dataList = this.dataListObj[val];
			},
			// 百分比切换
			leftViewClick(idx, item) {
				if (this.leftViewIndex === idx) return;
				this.leftViewIndex = idx;
				if (!this.user_lever) return;
				this.info.origin_price = this.user_lever * ((item.value) / 100)
			},
			// 开多、开空按钮切换
			leftViewBtnClick(idx) {
				for (let i in this.leftViewBtn) {
					this.leftViewBtn[i].active = false;
				}
				this.leftViewBtn[idx].active = true;
				this.info.type = Number(idx + 1);
				this.leftViewBtnValue = this.leftViewBtn[idx].title;
			},
			// 跳转详情
			detailClick() {
				uni.navigateTo({
					url: '/pages/point/detail?legal_name=' + this.legal_name + '&legal_id=' + this.info.legal_id +
						'&currency_name=' +
						this.currency_name + '&currency_id=' + this.info.currency_id
				})
			},
			// 信息购买
			leftViewBtnBottomClick() {
				if (!this.info.origin_price) return Toast(this.i18n.point.enter);
				if (!this.info.multiple) return Toast(this.i18n.point.multiple);
				if (Number(this.info.origin_price) > Number(this.user_lever)) return Toast(this.i18n.period.noOver);
				this.leftBtnShow = true;
				this.leftBtnBottom = [{
						title: this.$t('message').point.trade,
						value: this.leftViewBtnValue
					},
					{
						title: this.$t('message').point.spot,
						value: this.last_price + ' USDT'
					},
					{
						title: this.$t('message').point.leverage,
						value: this.info.multiple + ' X'
					},
					{
						title: this.$t('message').point.principal,
						value: this.info.origin_price + ' USDT'
					},
					{
						title: this.$t('message').point.opening,
						value: this.servicePrice + ' USDT'
					},
					{
						title: this.$t('message').point.order,
						value: (Number(this.info.origin_price) + this.servicePrice) + ' USDT'
					},
				]
			},
			// 杠杆点击
			leverClick(val) {
				this.info.multiple = val.value;
				if (!this.info.origin_price) return;
				this.amount = Number(this.info.origin_price) * Number(val.value);
			},
			// 交易委托
			async leftBtnClick() {
				this.loading = true;
				this.info.token = this.token;
				this.info.now_price = this.last_price;
				this.info.trade_fee = this.servicePrice;
				let {
					error,
					res
				} = await leverSubmit(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.period.success);
				this.loading = false;
				this.leftBtnShow = false;
				this.$store.dispatch('user/getInfo');
			},
			// 周期信息
			async leftShowViewBtn(first, last, close) {
				if (first !== undefined) {
					this.legalObj = first;
				}
				if (last !== undefined) {
					this.currencyObj = last
					this.lever_trade_fee = last.lever_trade_fee;
				}
				let {
					error,
					res
				} = await leverPoints({
					legal_id: this.legalObj.id,
					currency_id: this.currencyObj.currency_id,
					typename: this.typename,
					depth: this.depth,
					token: this.token
				});
				if (error) return;
				this.legal_name = this.legalObj.name;
				this.currency_name = this.currencyObj.currency_name;

				this.info.legal_id = this.legalObj.id;
				this.info.currency_id = this.currencyObj.currency_id;

				this.last_price = res.last_price;
				this.user_lever = Number(res.user_price);
				this.ExRAte = res.ExRAte;

				this.ratio = res.multiple.ratio;
				this.muit = res.multiple.muit;
				this.decline = res.leverdw_market.decline;
				this.up = res.leverdw_market.up;
				this.leverdw = res.leverdw_transaction.leverdw;
				this.user_price = res.user_price;
				this.userlock_price = res.userlock_price;
				this.userprofit_price = res.userprofit_price;

				this.dataListObj = res.leverdwtop_transaction;
				this.dataList = this.dataListObj[this.transactionIndex];
				if (this.$refs.loading === undefined) return;
				this.$refs.loading.close();
				if (!close) return;
				this.leftShow = false;
			},
			// 输入金额失去焦点
			principalBlur(e) {
				this.leftViewIndex = null;
				if (!this.info.multiple) return;
				// console.log(this.info.multiple, e.target.value)
				this.amount = this.info.multiple * Number(e.target.value);
			},
			// 实时跟新
			getDetail() {
				let _this = this;
				clearInterval(_this.time)
				_this.time = null;
				if (!_this.isRequest) return;
				_this.time = setInterval(() => {
					_this.leftShowViewBtn(undefined, undefined, false);
					_this.getLeverBatchdw_close();
					_this.getDetail();
				}, 1500)
			},
			// 开盘收盘默认 [click]
			pointListClick(val) {
				this.typename = val.value;
			},
			// 深度 [click]
			depthClick(val) {
				this.depth = val.value;
			},
			// 默认信息
			async customDefault() {
				for (let i in this.currencyShowList) {
					if (this.currencyShowList[i].name === 'USDT') {
						this.leftShowViewBtn(this.currencyShowList[i], this.currencyShowList[i].quotation[0], false)
					}
				}
			},
			// 平仓
			async getLeverBatchdw_close() {
				let {
					error,
					res
				} = await leverBatchdw_close({
					token: this.token
				});
				if (error) return;
			},
			actionClick(id) {
				// this.actionShow = true;
				this.$refs.actionShow.open('other', this.i18n.point.isAction);
				this.actionId = id;
			},
			async actionPopupClick() {
				// this.actionLoading = true;
				let {
					error,
					res
				} = await leverClose({
					id: this.actionId,
					token: this.token
				});
				if (error) return this.actionLoading = false;
				await Toast(this.i18n.point.positionApply);
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	@import './index.scss';
</style>
